<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input v-model="queryId" placeholder="商品分类编号" style="width: 200px; margin:5px 0 5px 0;" class="filter-item" @keyup.enter.native="handleFilter" />
      <el-input v-model="queryName" placeholder="商品分类名称" style="width: 200px; margin: 5px 0 5px 0;" class="filter-item" @keyup.enter.native="handleFilter" />
      <el-select v-model="queryRecommend" placeholder="是否推荐" clearable style="width: 160px; margin: 5px 0 5px 0;" class="filter-item">
        <el-option v-for="item in recommendOptions" :key="item" :label="item" :value="item" />
      </el-select>
      <el-select v-model="queryStats" placeholder="app是否显示" clearable style="width: 150px; margin: 5px 0 5px 0;" class="filter-item">
        <el-option v-for="item in statusOptions" :key="item" :label="item" :value="item" />
      </el-select>
      <el-select v-model="queryParent" placeholder="一级分类" clearable style="width: 220px; margin: 5px 0 5px 0;" class="filter-item" @change="getParent($event, 'topParent')">
        <el-option v-for="item in parentArr" :key="item.id" :label="item.name" :value="item.id" />
      </el-select>
      <el-select v-model="querySubParent" placeholder="二级分类" clearable style="width: 220px; margin: 5px 0 5px 0;" class="filter-item" @change="getParent($event, 'subParent')">
        <el-option v-for="item in subParentArr" :key="item.id" :label="item.name" :value="item.id" />
      </el-select>
      <el-select v-if="leafParentArr.length > 0" v-model="queryLeafParent" placeholder="叶级分类" clearable style="width: 220px; margin: 5px 0 5px 0;" class="filter-item">
        <el-option v-for="item in leafParentArr" :key="item.id" :label="item.name" :value="item.id" />
      </el-select>
      <el-button class="filter-item" style="margin: 5px 0 5px 0;" type="primary" icon="el-icon-search" @click="handleFilter" />
      <br>
    </div>
    <div class="filter-container">
      <el-radio-group v-model="sortBy">
        <el-radio label="0">按商品编号降序排列</el-radio>
        <el-radio label="1">按商品编号升序排列</el-radio>
        <el-radio label="2">按今日参与人数序排列</el-radio>
        <el-radio label="3">按今日参与人数升序排列</el-radio>
        <el-radio label="4">按今日参与金额降序排列</el-radio>
        <el-radio label="5">按今日参与金额升序排列</el-radio>
        <el-radio label="6">按总参与人数降序排列</el-radio>
        <el-radio label="7">按总参与人数升序排列</el-radio>
        <el-radio label="8">按总参与金额降序排列</el-radio>
        <el-radio label="9">按总参与金额升序排列</el-radio>
        <el-radio label="10">按库存量降序排列</el-radio>
        <el-radio label="11">按库存量升序排列</el-radio>
      </el-radio-group>
    </div>

    <el-table ref="multipleTable" v-loading="listLoading" :data="list" element-loading-text="Loading" border fit highlight-current-row @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" />
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form v-for="item in props.row.sku" :key="item.sku_id" label-position="left" inline class="yl-table-expand">
            <el-form-item label="图片">
              <template>
                <img :src="item.sku_image_url" min-width="70" height="70">
              </template>
            </el-form-item>
            <el-form-item label="商品sku编号">
              <span>{{ item.sku_id }}</span>
            </el-form-item>
            <el-form-item label="商品sku唯一标记">
              <span>{{ item.spec_id }}</span>
            </el-form-item>
            <el-form-item label="商品sku名称">
              <span>{{ item.attributes_name }}</span>
            </el-form-item>
            <el-form-item label="建议零售价">
              <span>{{ item.retail_price }}</span>
            </el-form-item>
            <el-form-item label="分销基准价">
              <span>{{ item.consign_price }}</span>
            </el-form-item>
            <el-form-item label="指定规格的货号">
              <span>{{ item.cargo_number }}</span>
            </el-form-item>
            <el-form-item label="可销售数量">
              <span>{{ item.amount_on_sale }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column align="center" label="商品编号" width="120">
        <template slot-scope="scope">
          {{ scope.row.product_id }}
        </template>
      </el-table-column>
      <el-table-column label="商品名称" width="240" align="center">
        <template slot-scope="scope">
          {{ scope.row.title }}
        </template>
      </el-table-column>
      <el-table-column label="商品分类名称" width="120" align="center">
        <template slot-scope="scope">
          {{ scope.row.category_name }}
        </template>
      </el-table-column>
      <el-table-column label="商品主图" width="120" align="center">
        <template slot-scope="scope">
          <img :src="scope.row.img_url" min-width="70" height="70">
        </template>
      </el-table-column>
      <el-table-column label="推荐" width="120" align="center">
        <template slot-scope="{row}">
          <el-tag :type="row.recommennd | recommendCssFilter">
            {{ row.recommennd | recommendFilter }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="状态" width="80" align="center">
        <template slot-scope="{row}">
          <el-tag :type="row.stats | statusCssFilter">
            {{ row.stats | statusFilter }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="阿里巴巴状态" width="120" align="center">
        <template slot-scope="{row}">
          <el-tag :type="row.alibaba_stats | alibabaStatusFilter">
            {{ row.alibaba_stats | alibabaStatusFilter }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="最小起订量" width="110" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.min_order_quantity }}</span>
        </template>
      </el-table-column>
      <el-table-column label="销量" width="80" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.sales }}</span>
        </template>
      </el-table-column>
      <el-table-column label="库存" width="80" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.amount_on_sale }}</span>
        </template>
      </el-table-column>
      <el-table-column label="渠道专属价" width="110" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.channel_price }}</span>
        </template>
      </el-table-column>
      <el-table-column label="参考价格" width="80" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.reference_price }}</span>
        </template>
      </el-table-column>
      <el-table-column label="分销基准价" width="110" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.consign_price }}</span>
        </template>
      </el-table-column>
      <el-table-column label="质量星级" width="80" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.quality_level }}</span>
        </template>
      </el-table-column>
      <el-table-column label="采集时间" width="180" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.created_at }}</span>
        </template>
      </el-table-column>
      <el-table-column label="更新时间" width="180" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.updated_at }}</span>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" align="center" width="150" class-name="small-padding fixed-width">
        <template slot-scope="{row, $index}">
          <el-button icon="el-icon-edit" type="primary" size="mini" @click="handleUpdate(row, $index)" />
        </template>
      </el-table-column>
    </el-table>

  </div>
</template>

<script>
import { getList } from '@/api/alibabaProduct'
import { getList as getCategory } from '@/api/alibabaCategory'

export default {
  filters: {
    recommendFilter(recommend) {
      const recommendMap = {
        1: '推荐至首页',
        0: '不推荐'
      }
      return recommendMap[recommend]
    },
    recommendCssFilter(recommend) {
      const recommendMap = {
        1: 'success',
        0: 'info'
      }
      return recommendMap[recommend]
    },
    alibabaStatusCssFilter(alibabaStatus) {
      const alibabaStatusMap = {
        'approved': 'success',
        'untread': 'danger',
        'auditing': 'info',
        'deleted': 'danger',
        'TBD': 'danger',
        'new': 'info',
        'modified': 'info',
        'member deleted': 'danger',
        'expired': 'danger',
        'auto expired': 'danger',
        'member expired': 'danger',
        'published': 'success'
      }
      return alibabaStatusMap[alibabaStatus]
    },
    alibabaStatusFilter(alibabaStatus) {
      const alibabaStatusMap = {
        'approved': '审批通过',
        'published': '上网状态',
        'member expired': '会员撤销',
        'auto expired': '自然过期',
        'expired': '过期',
        'member deleted': '会员删除',
        'modified': '修改',
        'new': '新发',
        'deleted': '删除',
        'TBD': 'to be delete',
        'auditing': '审核中',
        'untread': '审核不通过'
      }
      return alibabaStatusMap[alibabaStatus]
    },
    statusFilter(status) {
      const statusMap = {
        3: '已下架',
        2: '库存告急',
        1: '销售中',
        0: '待上架'
      }
      return statusMap[status]
    },
    statusCssFilter(status) {
      const statusMap = {
        3: 'danger',
        2: 'warn',
        1: 'success',
        0: 'info'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      hidden: false,
      listLoading: true,
      // 翻页相关数据 当前页，每页显示条数，排序方式，排序字段，符合条件的搜索结果数，搜索结果
      currentPage: 1,
      pageSize: 10,
      sort: 'desc',
      order: 'product_id',
      total: 0,
      list: [],
      queryId: '',
      queryName: '',
      queryStats: '',
      queryRecommend: '',
      queryParent: '',
      querySubParent: '',
      queryLeafParent: '',
      sortBy: '',
      // 搜索条件相关数据
      importanceOptions: [1, 2, 3],
      statusOptions: ['不显示', '显示'],
      recommendOptions: ['不推荐', '推荐'],
      showReviewer: false,
      // 上级分类数据
      parentArr: {},
      // 二级分类数据
      subParentArr: {},
      // 叶级分类数据
      leafParentArr: {},
      // 下载的loading
      downloadLoading: false,
      downloadData: [],
      changeFlag: false
    }
  },
  mounted() {},
  created() {
    this.getParent(0, 'topParent')
    this.fetchData()
  },
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    handleFilter() {
      this.currentPage = 1
      this.fetchData()
    },
    resetTemp() {
      this.temp = {
        id: undefined,
        name: '',
        parent: '',
        publishing: '',
        stats: ''
      }
    },
    handleDownload() {
      this.downloadLoading = true
      // const tHeader = ['编号', '角色名称', '创建者', '创建时间', '编辑时间']
      // const filterVal = ['id', 'name', 'created_by_name', 'created_at', 'updated_by_name']
      // const data = this.formatJson(filterVal)
      // download(tHeader, data, 'role')
      // import('@/vendor/Export2Excel').then(excel => {
      //   excel.export_json_to_excel({
      //     header: tHeader,
      //     data,
      //     filename: 'role'
      //   })
      //   this.downloadLoading = false
      // })
      this.downloadLoading = false
    },
    formatJson(filterVal) {
    },
    handleUpdate(row, idx) {
      // this.$router.push({ path: '/alibaba/alibaba/info', query: { id: row.product_id } })
      const routeData = this.$router.resolve({ path: '/alibaba/alibaba/info', query: { id: row.product_id }})
      window.open(routeData.href, '_blank')
    },
    handleModifyStatus(row, value) {},
    getParent(parent, vc) {
      let isLeaf = false
      const param = {
        sort: this.sort,
        order: this.order,
        page: this.currentPage,
        page_size: 9999
      }
      if (parent) {
        param.parent = parent
        if (vc === 'subParent' && this.subParentArr.length !== undefined) {
          this.subParentArr.map((item, idx) => {
            if (item.id === parent && item.publishing === '1') {
              isLeaf = true
            }
          })
        }
      } else {
        param.parent = 0
      }
      if (isLeaf === false) {
        getCategory(param).then(response => {
          const { data, meta } = response
          console.log(meta)
          if (param.parent === 0) {
            this.parentArr = data.map((item, idx) => {
              return { id: item.id, name: item.name, publishing: item.publishing }
            })
          } else {
            if (vc === 'topParent') {
              this.subParentArr = data.map((item, idx) => {
                return { id: item.id, name: item.name, publishing: item.publishing }
              })
            } else {
              this.leafParentArr = data.map((item, idx) => {
                return { id: item.id, name: item.name, publishing: item.publishing }
              })
            }
          }
        }).catch(() => {
          this.parentArr = []
        })
      }
    },
    fetchData() {
      this.listLoading = true
      if (this.sortBy === '0') {
        this.order = 'direct'
      } else if (this.sortBy === '1') {
        this.order = 'direct'
      } else if (this.sortBy === '2') {
        this.order = 'today_coupon'
      } else if (this.sortBy === '3') {
        this.order = 'today_coupon'
      } else if (this.sortBy === '4') {
        this.order = 'today_amount'
      } else if (this.sortBy === '5') {
        this.order = 'today_amount'
      } else if (this.sortBy === '6') {
        this.order = 'total_coupon'
      } else if (this.sortBy === '7') {
        this.order = 'total_coupon'
      } else if (this.sortBy === '8') {
        this.order = 'total_amount'
      } else if (this.sortBy === '9') {
        this.order = 'total_amount'
      } else if (this.sortBy === '10') {
        this.order = 'stock'
      } else if (this.sortBy === '11') {
        this.order = 'stock'
      }

      if (parseInt(this.sortBy) % 2 === 0) {
        this.sort = 'desc'
      } else {
        this.sort = 'asc'
      }
      const param = {
        sort: this.sort,
        order: this.order,
        page: this.currentPage,
        page_size: this.pageSize,
        redemption: 1
      }
      if (this.queryId !== '') {
        param.product_id = this.queryId
      }
      if (this.queryName !== '') {
        param.name = this.queryName
      }
      if (this.queryRecommend !== '') {
        this.recommendOptions.map((item, idx) => {
          if (this.queryRecommend === item) {
            param.recommend = idx
          }
        })
      }
      if (this.queryStats !== '') {
        this.statusOptions.map((item, idx) => {
          if (this.queryStats === item) {
            param.stats = idx
          }
        })
      }
      if (this.queryLeafParent !== '') {
        param.parent = this.queryLeafParent
      } else {
        if (this.querySubParent !== '') {
          param.parent = this.querySubParent
        } else {
          if (this.queryParent !== '') {
            param.parent = this.queryParent
          }
        }
      }
      console.log(param)
      getList(param).then(response => {
        const { data, meta } = response
        this.list = data
        this.listLoading = false
        this.currentPage = parseInt(meta.current_page)
        this.total = parseInt(meta.total)
      }).catch(() => {
        this.listLoading = false
        this.list = []
      })
    }
  }
}
</script>
<style scoped>
  .filter-container {
    background: #fff;
    padding: 32px 16px;
  }
  .yl-table-expand {
    font-size: 0;
  }
  .yl-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .yl-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 12.5%;
  }
</style>
